<template>
  <div class="monorBar" ref="monorBar"></div>
</template>

<script lang="ts">
export default {
  name: "monorBar"
};
</script>

<script setup lang="ts">
import { ECharts } from "echarts";
import echarts from "/@/plugins/echarts";
import { onMounted, nextTick, ref } from "vue";
import { tryOnUnmounted, useTimeoutFn } from "@vueuse/core";

import {
  addResizeListener,
  removeResizeListener
} from "element-plus/lib/utils/resize-event";

import { reportMon } from "/@/api/analysis";
import { storageLocal } from "/@/utils/storage";

const monorBar = ref<HTMLElement | null>(null) as any;

let echartInstance: ECharts;

let color = ["#85DF00", "#FFB265", "#5298FF"];

function initechartInstance(xAxisData?, data?) {
  const echartDom = document.querySelector(".monorBar");
  if (!echartDom) return;
  // @ts-ignore
  echartInstance = echarts.init(echartDom);
  echartInstance.clear(); //清除旧画布 重新渲染

  let timelineData = [];
  let timelineConf = [];

  // 根据每页显示条数确定需要分几页展示
  let numPerPageLimit = 6;
  let page = Math.ceil(data[0].length / numPerPageLimit);
  for (let i = 0; i < page; i++) {
    let start = i * numPerPageLimit;
    let end = (i + 1) * numPerPageLimit;
    let seriesItem = []; // series 数据
    data.forEach(item => {
      seriesItem.push({ data: item.slice(start, end) });
    });
    timelineConf.push({
      yAxis: { data: xAxisData.slice(start, end) },
      series: seriesItem
      // ...titleOption
    });
    timelineData.push("item" + i);
  }

  echartInstance.setOption({
    color,
    grid: {
      left: 104,
      right: 44,
      top: 29,
      bottom: 40
    },
    legend: {
      left: 104,
      padding: [8, 5, 4, 0],
      itemWidth: 8,
      itemHeight: 8
    },
    xAxis: {
      type: "value",
      axisTick: { show: false },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(160,185,252,0.6)"
        }
      },
      splitLine: {
        lineStyle: {
          type: "dashed",
          color: "rgba(160,185,252,0.4)"
        }
      },
      axisLabel: {
        textStyle: {
          color: "#545578"
        }
      }
    },
    yAxis: {
      type: "category",
      axisTick: { show: false },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(160,185,252,0.6)"
        }
      },
      axisLabel: {
        width: 100,
        overflow: "truncate",
        textStyle: {
          color: "#545578"
        }
      }
    },
    tooltip: {
      trigger: "axis",
      formatter: function (params) {
        var res = "<div><p>" + params[0].name + "</p ></div>";
        for (let i = 0; i < params.length - 1; i++) {
          res +=
            "<p><font color=" +
            params[i].color +
            ">● " +
            "</font>" +
            params[i].seriesName +
            "：" +
            params[i].data +
            "</p >";
        }
        return res;
      }
    },
    series: [
      {
        name: "已完成",
        // data: [150, 230, 135, 147, 260, 12, 34, 56, 89, 90, 345, 23, 454, 56, 66],
        type: "bar",
        barWidth: "8px",
        stack: "total",
        label: {
          show: false
          // formatter:
        }
      },
      {
        name: "处理中",
        // data: [100, 120, 123, 134, 177, 135, 147, 260, 12, 34, 56, 89],
        type: "bar",
        stack: "total"
      },
      {
        name: "未启动",
        // data: [67, 12, 46, 89, 140, 100, 120, 123, 134, 177, 135, 23, 123],
        type: "bar",
        stack: "total"
      },
      {
        name: "",
        color: "transparent",
        // data: [317, 120, 46, 89, 140, 12, 46, 89, 140, 100, 120, 123, 134], // 总和
        type: "bar",
        barWidth: "8px",
        barGap: "-100%",
        label: {
          show: true,
          color: "#545578",
          position: "right"
        }
      }
    ],
    timeline: {
      axisType: "category",
      show: false,
      autoPlay: true,
      playInterval: 6000,
      data: timelineData
    },
    options: timelineConf
  });
}

const getData = async () => {
  try {
    let sectionId = storageLocal.getItem("sectionInfo")?.id;
    let projectManageId = storageLocal.getItem("projectInfo")?.id;
    const { code, data } = await reportMon({
      sectionId,
      projectManageId
    });
    if (code === 200) {
      let name = [];
      let list = [[], [], [], []];
      data.forEach(item => {
        name.push(item.monomerName);
        let d = item.noStartDoingComplete;
        list[0].push(d.completeTotal);
        list[1].push(d.doingTotal);
        list[2].push(d.noStartTotal);
        list[3].push(d.completeTotal + d.doingTotal + d.noStartTotal);
      });
      let xAxisData = name;
      let dataList = list;
      // xAxisData = [
      //   "第一", "第二", "第三", "第四", "第五", "第六"
      // ]
      // let dataList = [
      //   [10, 16, 23, 56, 17, 86, 70, 156],
      //   [20, 24, 23, 24, 43, 23, 123, 233],
      //   [50, 30, 30, 56, 90, 89, 65, 67]
      //   [80, 70, 76, 136, 150, 198, 258, 456]
      // ];
      nextTick(() => {
        initechartInstance(xAxisData, dataList);
      });
    }
  } catch (err) {
    console.log(err);
  }
};

getData();

onMounted(() => {
  nextTick(() => {
    addResizeListener(monorBar.value, resetRender);
  });
  // useEventListener("resize", () => {
  //   console.log("resize");
  //   if (!echartInstance) return;
  //   useTimeoutFn(() => {
  //     echartInstance.resize();
  //   }, 180);
  // });
});

const resetRender = () => {
  if (!echartInstance) return;
  useTimeoutFn(() => {
    echartInstance.resize();
  }, 180);
};

tryOnUnmounted(() => {
  if (!echartInstance) return;
  echartInstance.dispose();
  echartInstance = null;
  removeResizeListener(monorBar.value, resetRender);
});
</script>

<style lang="scss" scoped>
.monorBar {
  width: 100%;
  height: 100%;
}
</style>
